<template>
  <div style="display: flex; height: 100%; width: 100%">
    <div class="options-box animate-fade-in">
      <div class="title-content">
        <span class="title-text">账号设置</span>
      </div>
    </div>
    <div class="main-box animate-fade-in-up">
      <el-descriptions
        class="margin-top content-box hover-lift"
        title="个人信息"
        :column="1"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item hover-scale">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              用户名
            </div>
          </template>
          <span v-if="!dialogVisible" class="info-value">{{ userInfo?.data?.data?.username }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item hover-scale">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              手机号
            </div>
          </template>
          <span class="info-value">{{ userInfo?.data?.data?.phone }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item hover-scale">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              姓名
            </div>
          </template>
          <span class="info-value">{{ userInfo?.data?.data?.realName }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item hover-scale">
              <el-icon :style="iconStyle">
                <Message />
              </el-icon>
              邮箱
            </div>
          </template>
          <span class="info-value">{{ userInfo?.data?.data?.mail }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-button 
        class="edit-button hover-lift shimmer" 
        style="position: absolute;left: 35px; top: 250px;" 
        type="primary" 
        @click="dialogVisible = !dialogVisible"
      >
        修改个人信息
      </el-button>
    </div>
  </div>
  <!-- 修改信息 -->
  <el-dialog v-model="dialogVisible" title="修改个人信息" width="60%" :before-close="handleClose">
    <div class="register" :class="{ hidden: isLogin }">
      <el-form
        ref="loginFormRef"
        :model="userInfoForm"
        label-width="50px"
        class="form-container"
        width="width"
        :rules="formRule"
      >
        <el-form-item prop="username">
          <el-input
            v-model="userInfoForm.username"
            placeholder="请输入用户名"
            maxlength="11"
            show-word-limit
            disabled
          >
            <template v-slot:prepend> 用户名 </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="mail">
          <el-input v-model="userInfoForm.mail" placeholder="请输入邮箱" show-word-limit clearable>
            <template v-slot:prepend> 邮<span class="second-font">箱</span> </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input
            v-model="userInfoForm.phone"
            placeholder="请输入手机号"
            show-word-limit
            clearable
          >
            <template v-slot:prepend> 手机号 </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="realName">
          <el-input
            v-model="userInfoForm.realName"
            placeholder="请输入姓名"
            show-word-limit
            clearable
          >
            <template v-slot:prepend> 姓<span class="second-font">名</span> </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="userInfoForm.password"
            placeholder="默认密码，如需修改可输入新密码"
            show-word-limit
            clearable
          >
            <template v-slot:prepend> 密<span class="second-font">码</span> </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="changeUserInfo(loginFormRef)"> 提交 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from 'vue'
import { getUsername } from '@/core/auth'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'
const loginFormRef = ref()
const { proxy } = getCurrentInstance()
// eslint-disable-next-line no-unused-vars
const API = proxy.$API
const userInfo = ref()
const userInfoForm = ref() // 修改信息
const getUserInfo = async () => {
  const username = getUsername()
  userInfo.value = await API.user.queryUserInfo(username)
  userInfoForm.value = cloneDeep(userInfo.value.data?.data)
  // console.log(userInfoForm.value)
}
getUserInfo()
// 修改信息
const dialogVisible = ref(false)
const formRule = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3|5|7|8|9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    },
    { min: 11, max: 11, message: '手机号必须是11位', trigger: 'blur' }
  ],
  username: [{ required: true, message: '请输入您的用户名', trigger: 'blur' }],
  mail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请输入正确的邮箱号',
      trigger: 'blur'
    }
  ],
  password: [
    { required: false, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 15, message: '密码长度请在八位以上', trigger: 'blur' }
  ],
  realNamee: [{ required: true, message: '请输姓名', trigger: 'blur' }]
})
const changeUserInfo = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await API.user.editUser(userInfoForm.value).then((res) => {
        if (res?.data?.code !== '0') {
          ElMessage.error(res.data.message)
        } else {
          getUserInfo()
          dialogVisible.value = false
          ElMessage.success('修改成功!')
        }
      })
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.main-box {
  position: relative;
  flex: 1;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
}

.options-box {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 280px;
  border-right: 1px solid var(--border-primary);
  background: var(--bg-primary);
  box-shadow: var(--shadow-light);
  
  .title-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.05), transparent);
      animation: shimmer 3s ease-in-out infinite;
    }
    
    .title-text {
      position: relative;
      z-index: 1;
      transition: all var(--animation-normal) var(--ease-out);
      
      &:hover {
        color: var(--el-color-primary);
        transform: translateY(-1px);
      }
    }
  }
}

.content-box {
  background: var(--bg-primary);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-primary);
  transition: all var(--animation-normal) var(--ease-out);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--el-color-primary);
  }
  
  :deep(.el-descriptions__header) {
    .el-descriptions__title {
      background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 600;
      animation: gradientShift 3s ease infinite;
    }
  }
  
  :deep(.el-descriptions__body) {
    .el-descriptions__table {
      .el-descriptions__cell {
        transition: all var(--animation-normal) var(--ease-out);
        
        &:hover {
          background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
        }
      }
    }
  }
}

.cell-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--animation-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.05), transparent);
    transition: left 0.5s ease;
  }
  
  &:hover::before {
    left: 100%;
  }
  
  &:hover {
    transform: translateX(4px);
    color: var(--el-color-primary);
    
    .el-icon {
      transform: scale(1.1) rotate(5deg);
    }
  }
  
  .el-icon {
    transition: all var(--animation-normal) var(--ease-out);
    color: var(--el-color-primary);
  }
}

.info-value {
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--animation-normal) var(--ease-out);
  
  &:hover {
    color: var(--el-color-primary);
    transform: translateX(2px);
  }
}

.edit-button {
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
  border: none;
  border-radius: var(--radius-medium);
  font-weight: 500;
  transition: all var(--animation-normal) var(--ease-out);
  
  &:hover {
    background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary-light-5));
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
  }
}

.form-container {
  .el-form-item {
    transition: all var(--animation-normal) var(--ease-out);
    
    &:hover {
      transform: translateX(4px);
    }
    
    .el-input {
      .el-input__wrapper {
        transition: all var(--animation-normal) var(--ease-out);
        
        &:hover {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
        }
        
        &.is-focus {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.15);
          transform: translateY(-1px);
        }
      }
    }
  }
}

.second-font {
  margin-left: 13px;
}

// 响应式设计
@media (max-width: 768px) {
  .options-box {
    width: 200px;
  }
  
  .main-box {
    padding: var(--spacing-md);
  }
  
  .edit-button {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: var(--spacing-lg);
  }
}
</style>
